<template>
    <div class="app_content">
        <div class="table_qy">
            <div class="middle lb_title">列表</div>
            <div class="middle cxk_qy" ref="element">
                <!-- 'formInline' 为此el-form 自定义的对象  -->
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="参数标识">
                        <el-input v-model="formInline.csbs" placeholder="参数标识"  size="mini"></el-input>   <!-- v-model 存放属性-->
                    </el-form-item>
                    <el-form-item label="参数标识">
                        <el-input v-model="formInline.csbs" placeholder="参数标识"  size="mini"></el-input>   <!-- v-model 存放属性-->
                    </el-form-item>
                    <el-form-item label="参数标识">
                        <el-input v-model="formInline.csbs" placeholder="参数标识"  size="mini"></el-input>   <!-- v-model 存放属性-->
                    </el-form-item>
                    <el-form-item label="参数值">
                        <el-select v-model="formInline.csz" placeholder="参数值" size="mini">
                            <el-option label="系统参数1" value="cs1"></el-option>
                            <el-option label="系统参数2" value="cs2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="findListByPage()" size="mini" class="button_search">查询</el-button>
                        <el-button type="info" @click="findListByPage()" size="mini" class="button_reset">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="middle gnan">
                <el-button type="primary" size="mini"  class="button_search" @click="add()">新增</el-button>
                <el-button type="info" size="mini"  class="button_reset" @click="add()">功能</el-button>
                <el-button type="danger" size="mini"  class="button_delete" @click="plsc()">批量删除</el-button>
            </div>
            <div class="table_padding">
                <div class="table_content">
                    <el-table :data="tableData"  stripe border class="table_overflow" :style="{height: scrollerHeight}">
                        <el-table-column type="index" label="序号" width="52"></el-table-column>
                        <el-table-column prop="csbs" label="参数标识" width="200"></el-table-column>
                        <el-table-column prop="csbssm" label="参数标识说明" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="csz" label="参数值"  width="200"></el-table-column>
                        <el-table-column prop="bz" label="备注" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="" label="操作" width="120">
                            <template slot-scope="scope">           <!-- (scope.row) 为单个行对象 -->
                                <el-button size="small" @click="modify(scope.row)"  type="text" ><i class="el-icon-edit-outline tb_ys"></i></el-button>
                                <el-button size="small" @click="info(scope.row)"  type="text" ><i class="el-icon-view tb_ys"></i></el-button>
                                <el-button size="small"  type="text" @click="del(scope.row)"><i class="el-icon-delete tb_ys"></i></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pageIn">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-sizes="[100, 200, 300, 400]"
                                :page-size="100"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="400">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
        <!--  根据弹窗组件别名编写自定义组件标签 ref为映射,‘addXtcsDialog’理解为弹窗类，里面可以有属性，方法等 @findListByPage 为添加/修改接口方法执行后刷新父页列表数据 -->
        <AddXtcsDialog ref="addXtcsDialog" @findListByPage="findListByPage()"></AddXtcsDialog>
        <ModifyXtcsDialog ref="modifyXtcsDialog" @findListByPage="findListByPage()"></ModifyXtcsDialog>
        <InfoXtcsDialog ref="infoXtcsDialog" ></InfoXtcsDialog>
    </div>
</template>

<script>
    import {findListByPage,findOne,del,upload} from '../../../../api/app/xtgl/xtcs/xtcs.js'              /* 引入接口文件 定义接口别名 */
    import AddXtcsDialog from './addXtcsDialog'                                         /* 引入弹出框组件 定义弹窗组件别名 */
    import ModifyXtcsDialog from './modifyXtcsDialog'
    import InfoXtcsDialog from './infoXtcsDialog'

    export default {
        data(){
            return{
                //定义属性
                scrollerHeight:"",
                formInline: {
                    csbs: null,
                    csz: null
                },
                currentPage:1,                  //初始页
                tableData: [{index:"1",csbs:"csbs1",csbssm:"csbssm1",csz:"csz1",bz:"备注一"},{index:"1",csbs:"csbs1",csbssm:"csbssm1",csz:"csz1",bz:"备注一"},{index:"1",csbs:"csbs1",csbssm:"csbssm1",csz:"csz1",bz:"备注一"},{index:"1",csbs:"csbs1",csbssm:"csbssm1",csz:"csz1",bz:"备注一"},{index:"1",csbs:"csbs1",csbssm:"csbssm1",csz:"csz1",bz:"备注一"},{index:"1",csbs:"csbs1",csbssm:"csbssm1",csz:"csz1",bz:"备注一"},{index:"1",csbs:"csbs1",csbssm:"csbssm1",csz:"csz1",bz:"备注一"},{index:"1",csbs:"csbs1",csbssm:"csbssm1",csz:"csz1",bz:"备注一"},{index:"1",csbs:"csbs1",csbssm:"csbssm1",csz:"csz1",bz:"备注一"},{index:"1",csbs:"csbs1",csbssm:"csbssm1",csz:"csz1",bz:"备注一"},{index:"1",csbs:"csbs1",csbssm:"csbssm1",csz:"csz1",bz:"备注一"},{index:"1",csbs:"csbs1",csbssm:"csbssm1",csz:"csz1",bz:"备注一"},{index:"1",csbs:"csbs1",csbssm:"csbssm1",csz:"csz1",bz:"备注一"},{index:"1",csbs:"csbs1",csbssm:"csbssm1",csz:"csz1",bz:"备注一"}],                  //列表数据集合
                total:null,
            }
        },
        mounted() {                             //页面初始化加载(只在页面初始时加载一次)
            // this.findListByPage()
            // (table高度动态获取)
            let height= this.$refs.element.offsetHeight;
            this.scrollerHeight = (window.innerHeight - height - 240) + 'px';
        },

        computed: {
        },
        methods:{
            //批量删除
            plsc(){
                this.$confirm('此操作将批量删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '批量删除'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消批量删除'
                    });
                });
            },
            async findListByPage(){             //异步请求分页接口
                let parms ={                    //axios(ajax) 请求参数
                    csbs:this.formInline.csbs,
                    csz:this.formInline.csz,
                    page:this.currentPage,
                    pageSize:10
                }
                let data = await findListByPage(parms)                          //请求参数路径方法为‘findListByPage’ data返回数据
                this.tableData=data.content
                this.total = data.total
            },

            modify(row){                                                        //修改方法
                this.$refs['modifyXtcsDialog'].csbs = row.csbs                  //获取自定义标签映射，回现赋值
                this.$refs['modifyXtcsDialog'].csbssm = row.csbssm
                this.$refs['modifyXtcsDialog'].bz = row.bz
                this.$refs['modifyXtcsDialog'].csz = row.csz
                this.$refs['modifyXtcsDialog'].show()                           //弹窗显示
            },

            add(){
                this.$refs['addXtcsDialog'].show()
            },

            info(row){
                this.$refs['infoXtcsDialog'].csbs = row.csbs
                this.$refs['infoXtcsDialog'].csbssm = row.csbssm
                this.$refs['infoXtcsDialog'].bz = row.bz
                this.$refs['infoXtcsDialog'].csz = row.csz
                this.$refs['infoXtcsDialog'].show()
            },

            del(row){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let parms ={
                        csbs:row.csbs
                    }
                    let data = del(parms);

                    if(data.code==200){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.findListByPage()
                    }else{
                        this.$message({
                            type: 'danger',
                            message: '操作失败'
                        });
                    }
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            upload(){

            },

            handleSizeChange(val) {                                               //分页
                // console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {                                            //分页
                this.currentPage = val
                    // console.log(`当前页: ${val}`);
            },
        },

        components:{                                                            //注册组件
            AddXtcsDialog,
            ModifyXtcsDialog,
            InfoXtcsDialog
        },
    }
</script>

<style >
    @import "../../../../styles/app0301.scss";
</style>